import React from 'react'
import './index.scss'
export default class Rate extends React.Component{
        constructor (props) {
                super (props);
                this.state={
                        count:this.props.count||1
                }
        }
        handleOnClick = count =>{
                const {type,onChange} = this.props
                if (type === 'small') {
                        return
                }
                this.setState({count},()=>{
                        onChange(count)
                })
        }
        render () {
                const {type} = this.props
                const {count} = this.state
                const starValues = [1,2,3,4,5]
                return <div className={`rate-wrapper ${type}`}>
                        {
                                starValues.map(item=><div className={`star ${count<item?'off':'on'}`} onClick={this.handleOnClick.bind(this,item)}/>)
                        }
                </div>
        }

}
